<template>
    <div>
        <el-upload
                ref="uploadMoreImage"
                class="avatar-uploader"
                accept="image/png,image/gif,image/jpg,image/jpeg,image/svg"
                :http-request="handleUploadFile"
                list-type="picture-card"
                :class="{upload_btn_hide_class:hasHideBtn}"
                :action="upload_url"
                :limit="maxLimit"
                :file-list="imageUrls"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove">
            <i class="el-icon-plus" style="color: #409EFF"></i>
        </el-upload>
        <el-dialog :visible.sync="previewImageVisible" append-to-body>
            <img width="100%" :src="previewImageUrl" alt="">
        </el-dialog>
    </div>
</template>

<script>
    import storageHelper from '@/utils/storageHelper.js';

    export default {
        name: "UploadMoreImageCmm",
        data() {
            return {
                hasHideBtn: false,
                upload_url: '',
                imageUrls: [],
                previewImageVisible: false,
                previewImageUrl: ''
            }
        },
        props: {
            wxImageList: {
                type: Array,
                default: function () {
                    return []
                }
            },
            maxLimit: {
                type: Number,
                default: 20
            }
        },
        watch: {
            wxImageList(value) {
                if (value) {
                    this.updateWxImageList(value);
                }
            }
        },
        created() {
            this.updateWxImageList(this.wxImageList);
        },
        methods: {
            updateWxImageList: function (value) {
                this.imageUrls = []
                value.forEach(item => {
                    this.imageUrls.push({name: item, url: item});
                });
                if (this.imageUrls.length == this.maxLimit) {
                    this.hasHideBtn = true;
                } else {
                    this.hasHideBtn = false;
                }
            },
            handlePictureCardPreview: function (file) {
                this.previewImageUrl = file.url;
                this.previewImageVisible = true;
            },
            handleRemove(file, fileList) {
                let imgArray = [];
                fileList.forEach((val) => {
                    imgArray.push(val.name);
                })
                this.$emit('update:wxImageList', imgArray);
            },
            handleUploadFile(params) {
                const isLt2M = params.file.size / 1024 / 1024 < 10;
                if (!isLt2M) {
                    this.$message.error("请上传10M以下的图片文件");
                    return false;
                }
                // 根据后台需求数据格式
                const form = new FormData();
                form.append("file", params.file);
                // 文件对象
                this.$store.dispatch('uploadResource', form).then((res) => {

                    let imgArray = [...this.wxImageList];
                    imgArray.push(res.url);
                    this.$emit('update:wxImageList', imgArray);
                });

            }
        }
    }
</script>

<style>
    .upload_btn_hide_class .el-upload--picture-card {
        display: none;
    }

    .el-upload-list--picture-card .el-upload-list__item {
        width: 120px;
        height: 120px;
        line-height: 120px;
    }

    .el-upload-list__item-status-label {
        line-height: initial;
    }

    .el-upload--picture-card {
        border: 1px dashed #409EFF;
        width: 120px;
        height: 120px;
        line-height: 120px;
    }

    .el-upload-list__item {
        transition: none !important;
    }

    .avatar-uploader .el-upload {
        border-radius: 8px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

</style>

